<template>
  <KView class="goods-list-item clearfix" @click="itemClick">
    <KView class="goods-list-item-pic">
      <sys-image :src="goods.pic" mode="auto" :radius="8"></sys-image>
    </KView>
    <KView class="goods-list-item-content">
      <KView class="goods-item-name clearfix">
        <KView class="ellipsis goods-item-text">{{goods.name}}</KView>
        <KView class="goods-item-arrow">
          <sys-svg name="arrowRight" color="#d8d8d8"></sys-svg>
        </KView>
      </KView>
      <KView class="goods-item-evaluate clearfix">
        <KView class="goods-item-star">
          <sys-svg name="star" color="#ffa50b"></sys-svg>
        </KView>
        <KView class="goods-item-score">{{goods.score}}</KView>
        <KView class="goods-item-count" v-if="goods.monthCount!==null">
          月售{{goods.monthCount}}单
        </KView>
      </KView>
      <KView class="goods-item-tag" v-if="goods.labelList.length>0">
        <sys-tag v-for="(label,index) in goods.labelList" :key="'tag_'+index">{{label}}</sys-tag>
      </KView>
    </KView>

    <KView class="goods-list-item-distance">{{goods.distanceText}}</KView>
  </KView>
</template>

<script>
  import SysTag from 'common/sysTag';
  import SysImage from 'common/sysImage';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods:{
      itemClick(){
        this.$emit('item-click',this.goods);
      }
    },

    components: {
      SysTag,
      SysImage,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .goods-list-item {
    position: relative;
    height: 100%;

    >div {
      float: left;
    }

    .goods-list-item-pic {
      width: formatPx(162);
      height: formatPx(162);
      border-radius: formatPx(8);
      overflow: hidden;
    }

    .goods-list-item-content {
      width: calc(100% - #{formatPx(182)});
      height: 100%;
      padding-left: formatPx(20);

      >div {
        margin-bottom: formatPx(15);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .goods-item-name {
        font-size: formatPx(30);
        height: formatPx(46);

        >div {
          float: left;
        }

        .goods-item-text {
          margin-right: formatPx(15);
          width: calc(100% - #{formatPx(47)});
        }

        .goods-item-arrow {
          width: formatPx(32);
          height: 100%;
        }
      }

      .goods-item-evaluate {
        height: formatPx(30);

        >div {
          float: left;
          height: 100%;
        }

        .goods-item-star {
          width: formatPx(22);
          margin-right: formatPx(5);
        }

        .goods-item-score {
          font-size: formatPx(19);
          color: #ffa814;
          width: formatPx(50);
          line-height: formatPx(30);
          margin-right: formatPx(15);
        }

        .goods-item-count {
          font-size: formatPx(22);
          color: #b3b9c2;
          line-height: formatPx(30);
        }
      }

      .goods-item-tag {
        font-size: formatPx(18);

        .sys-tag {
          margin-right: formatPx(8);

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .goods-list-item-distance{
      position: absolute;
      color: #b3b9c2;
      font-size: formatPx(22);
      right: 0;
      bottom: 0;
    }
  }

</style>
